import React, { useEffect, useState } from 'react';
import { Button, Input, Divider, Pagination } from 'antd';
import moment from 'moment';
import { reqCommitLists, reqWriteCommit } from '../../../../api';
const { TextArea } = Input;
import ExampleComment from "./ExampleComment"

export const Comments = (props) => {

    let key = 1
    let [commitList, setCommitList ] = useState([])
    let [value, setValue] = useState("")
    let problemId = props.value
    let init = {
        "page": 1,
        "pageSize": 3,
        problemId
    }
    let submit = {
        "content": "评论测试3",
        problemId,
        "authorVo": {
            "id": "15570357290",
            "username": null,
            "mail": null
        },
        "parentId": "0",
        "toUser": null,
        "supportNumber": 0,
        "createDate": moment().format('YYYY-MM-DD HH:mm:ss'),
        "level": 1
    }
    let menuList = [...commitList]

    const submitComment = async()=>{
        let content = {
            ...submit,
            content:value,
            authorVo:{
                id:localStorage.getItem("authorId"),
                "username": null,
                "mail": null
            }
        }
        setCommitList(commitList => [...commitList, content])
        // let result = await reqWriteCommit({...content})
        // setCommitList(commitList => [...commitList,result.data.data])
    }
    const onChange = (e)=>{

    }
    useEffect(async()=>{
        // let params = { ...init, problemId}
        // let result = await reqCommitLists(params)
        // let commitLists = result.data.data
        let commitLists = [
            {
                "id": "1471436141732007937",
                "content": "评论测试3",
                "problemId": "1",
                "authorVo": {
                    "id": "15570357290",
                    "username": "冰箱的主人",
                    "mail": "Hyperion_LR@foxmail.com",
                    "studentNumber": null
                },
                "parentId": "0",
                "toUser": null,
                "supportNumber": 10,
                "createDate": "2021-12-16 19:04",
                "level": 0
            },
            {
                "id": "1471322339334123521",
                "content": "评论测试3",
                "problemId": "1",
                "authorVo": {
                    "id": "15570357290",
                    "username": "冰箱的主人",
                    "mail": "Hyperion_LR@foxmail.com",
                    "studentNumber": null
                },
                "parentId": "0",
                "toUser": {
                    "id": "15570357290",
                    "username": "冰箱的主人",
                    "mail": "Hyperion_LR@foxmail.com",
                    "studentNumber": null
                },
                "supportNumber": 101,
                "createDate": "2021-12-16 11:32",
                "level": 0
            },
            {
                "id": "1471040527894482946",
                "content": "评论测试3",
                "problemId": "1",
                "authorVo": {
                    "id": "15570357290",
                    "username": "冰箱的主人",
                    "mail": "Hyperion_LR@foxmail.com",
                    "studentNumber": null
                },
                "parentId": "0",
                "toUser": {
                    "id": "15570357290",
                    "username": "冰箱的主人",
                    "mail": "Hyperion_LR@foxmail.com",
                    "studentNumber": null
                },
                "supportNumber": 110,
                "createDate": "2021-12-15 16:52",
                "level": 0
            }
        ]
        await setCommitList(() => commitLists)

    },[])
    useEffect(()=>{
        console.log("几次");
    }, [commitList])
    // reduce+递归生成评论
    

    return (
        <div>
            <div >
                <div >
                    <div >{commitList.length}条评论</div>
                </div>
                <div>
                    <TextArea onChange={e => {
                        setValue(e.target.value)
                    }} allowClear autoSize  />
                </div>
                
                <div style={{display:"flex", justifyContent:"flex-end"}}><Button type="primary" onClick={()=>submitComment()} style={{padding:"0",magin:"0"}}>评论</Button></div>
            </div>
            <Divider plain>精选评论({commitList.length})</Divider>
            {/* <Divider plain>精选评论(5)</Divider> */}
            <div>

                {
                    menuList.reduce((pre, item) => {
                        
                        if (!item.toUser) {
                            pre.push((
                                <ExampleComment props={item} key={++key}/>
                            ))
                        } else {
                            pre.push((
                                <ExampleComment props={item} key={++key}>
                                    <ExampleComment props={item.toUser} key={++key} />
                                </ExampleComment>
                            ))
                        }
                        return pre
                    }, [])
                }
              
            </div>
            <div>
                {
                    menuList.length > 10 ? <Pagination onChange={onChange} total={menuList.length} />:""
                }
            </div>
            
        </div>
    )
}